<template>
	<scroll-view scroll-y="true" @refresherrefresh='refresherrefresh'>
		<view class="address-form">
			<navBar :title="t('address.edit')"></navBar>
			<view class="form-group">
				<view class="form-item">
					<text class="label">{{t('address.Consignee')}}</text>
					<input type="text" v-model="formData.name" placeholder="Enter name" class="input" />
				</view>

				<view class="gender-select">
					<button class="gender-btn" :class="{ active: formData.gender === 'Mr.' }"
						@tap="formData.gender = 'Mr.'">Mr.</button>
					<button class="gender-btn" :class="{ active: formData.gender === 'Ms.' }"
						@tap="formData.gender = 'Ms.'">Ms.</button>
				</view>

				<view class="form-item">
					<text class="label">{{t('address.Number')}}</text>
					<input type="number" v-model="formData.phone" placeholder="Enter phone number" class="input" />
				</view>

				<view class="form-item clickable" @tap="selectCity">
					<text class="label">{{t('address.City')}}</text>
					<view class="value-wrapper">
						<text class="value">{{ formData.city || 'Select city' }}</text>
						<text class="iconfont icon-right">&#xe6a3;</text>
					</view>
				</view>

				<view class="form-item clickable" @tap="selectAddress">
					<text class="label">{{t('address.ShippingAddress')}}</text>
					<view class="value-wrapper">
						<text class="value">{{ formData.address || 'Select address' }}</text>
						<text class="iconfont icon-right">&#xe6a3;</text>
					</view>
				</view>

				<view class="form-item">
					<text class="label">{{t('address.HouseNumber')}}</text>
					<input type="text" v-model="formData.houseNumber" placeholder="Enter house number" class="input" />
				</view>

				<view class="form-item">
					<text class="label">{{t('address.label')}}</text>
					<view class="tag-group">
						<view v-for="tag in tags" :key="tag" class="tag" :class="{ active: formData.label === tag }"
							@tap="formData.label = tag">{{ tag }}</view>
					</view>
				</view>
			</view>

			<view class="button-group">
				<button class="save-btn" @tap="handleSave" :disabled="!isFormValid">{{t('address.Save')}}</button>

				<button class="delete-btn" @tap="handleDelete" v-if="isEdit">{{t('address.Delete')}}</button>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import navBar from "../../components/navBar/index.vue"
	import {
		useI18n
	} from 'vue-i18n'

	const {
		t
	} = useI18n()
	interface AddressForm {
		name : string
		gender : 'Mr.' | 'Ms.'
		phone : string
		city : string
		address : string
		houseNumber : string
		label : string
	}

	// Form data
	const formData = ref<AddressForm>({
		name: 'ZHANG',
		gender: 'Mr.',
		phone: '19988887777',
		city: 'NANJING',
		address: 'Jiangning District Nantong Xinhua Construction Group',
		houseNumber: '12345',
		label: 'Home'
	})

	const tags = ['Home', 'Company', 'School']

	const isEdit = ref(true)

	const isFormValid = computed(() => {
		return (
			formData.value.name &&
			formData.value.phone &&
			formData.value.city &&
			formData.value.address
		)
	})

	const selectCity = () => {
		uni.showToast({
			title: 'Opening city selector',
			icon: 'none'
		})
	}

	const selectAddress = () => {
		uni.showToast({
			title: 'Opening address selector',
			icon: 'none'
		})
	}

	const handleSave = () => {
		if (!isFormValid.value) {
			uni.showToast({
				title: 'Please fill in all required fields',
				icon: 'none'
			})
			return
		}

		uni.showLoading({ title: 'Saving...' })

		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({
				title: 'Saved successfully',
				icon: 'success'
			})
			uni.navigateBack()
		}, 1000)
	}

	const handleDelete = () => {
		uni.showModal({
			title: 'Confirm Delete',
			content: 'Are you sure you want to delete this address?',
			cancelText: t('common.cancelText'),
			confirmText: t('common.confirmText'),
			success: (res) => {
				if (res.confirm) {
					uni.showLoading({ title: 'Deleting...' })

					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							title: 'Deleted successfully',
							icon: 'success'
						})
						uni.navigateBack()
					}, 1000)
				}
			}
		})
	}
</script>

<style lang="scss">
	.address-form {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.form-group {
		background-color: #fff;
		padding: 0 16px;
		margin-top: 68rpx;
	}

	.form-item {
		padding: 16px 0;
		border-bottom: 1px solid #f5f5f5;
		display: flex;

		&:last-child {
			border-bottom: none;
		}

		&.clickable {
			display: flex;
			align-items: center;
		}
	}

	.label {
		font-size: 14px;
		color: #999;
		margin-bottom: 8px;
		display: block;
	}

	.input {
		font-size: 16px;
		color: #333;
		width: 100%;
		padding: 4px 0;
		margin-left: 18rpx;
	}

	.gender-select {
		display: flex;
		gap: 12px;
		margin: 12px 0;

		.gender-btn {
			flex: 1;
			height: 36px;
			line-height: 36px;
			text-align: center;
			border-radius: 18px;
			font-size: 14px;
			background-color: #f5f5f5;
			color: #666;
			border: none;

			&.active {
				background-color: #ff4d67;
				color: #fff;
			}
		}
	}

	.value-wrapper {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-left: 18rpx;

		.value {
			font-size: 16px;
			color: #333;
		}

		.icon-right {
			color: #999;
			font-size: 16px;
		}
	}

	.tag-group {
		display: flex;
		gap: 12px;
		margin-left: 102rpx;

		.tag {
			padding: 8px 20px;
			border-radius: 16px;
			font-size: 14px;
			background-color: #f5f5f5;
			color: #666;

			&.active {
				background-color: #fff1f2;
				color: #ff4d67;
			}
		}
	}

	.button-group {
		position: fixed;
		bottom: 168rpx;
		width: 90%;
		left: 0;
		right: 0;
		margin: auto;

		.save-btn {
			width: 100%;
			height: 48px;
			line-height: 48px;
			background-color: #ff4d67;
			color: #fff;
			border-radius: 16rpx;
			font-size: 16px;
			margin-bottom: 12px;
			border: none;

			&:disabled {
				opacity: 0.6;
			}
		}

		.delete-btn {

			width: 100%;
			height: 48px;
			line-height: 48px;
			background-color: #fff;
			color: #333;
			border-radius: 16rpx;
			font-size: 16px;
			border: none;
		}
	}

	// Fix button hover effect
	button::after {
		border: none;
	}
</style>